<template>
  <div class="footer">
    <list v-if="event" class="event-box">
      <cell class="event">
        <div class="tag">
          <text>{{language.rules}}</text>
        </div>
        <div class="message">
          <text>[每滿60可抽一次]可抽兩次，再購40.8元可抽3次</text>
        </div>
        <div class="order">
          <text>{{language.Snacks}}</text>
          <i class="iconfont icon-back arrow-right"></i>
        </div>
      </cell>
    </list>
    <list class="list-box">
      <cell class="bill-cell">
        <div class="bill">
          <text>{{language.total}}</text>
          <text class="price">{{totalPrice}}</text>
        </div>
        <div v-if="event" class="event-action">
          <text>{{language.luckydraw}}</text>
        </div>
          <div class="cancelorder">
          <text @click="openDialog">{{language.cancelorder}}</text>
        </div>
        <div class="order">
          <text @click="jumpToPage('/')">{{language.Snacks}}</text>
        </div>
      </cell>
    </list>
    <wxc-dialog :title="language.alert"
                :content="language.title"
                :cancel-text="language.call"
                :confirm-text="language.affirm"
                 main-btn-color="#f45551"
                :show="show"
                :single="false"
                :is-checked="false"
                :show-no-prompt="false"
                @wxcDialogCancelBtnClicked="wxcDialogCancelBtnClicked"
                @wxcDialogConfirmBtnClicked="wxcDialogConfirmBtnClicked">
    </wxc-dialog>
  </div>
</template>
<style>
    .dialog-box{
        border-radius: 15px;
    }
</style>
<style lang="scss" scoped>
  .footer {
    position: fixed;
    height:165px;
    left: 0;
    right: 0;
    bottom: 0;
    background:#fff;
    .event-box {
      border-top: 1px solid #DFDFDF;
      .event {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
        padding: 40px 20px;
        .tag {
          margin-right: 10px;

          > p {
            font-size: 24px;
            border: 1px solid #f45551;
            border-radius: 5px;
            padding: 0 5px;
            color: #f45551;
          }
        }

        .message {
          flex: 1;

          > p {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: block;
          }
        }

        .order {
          flex-direction: row;
          align-items: center;

          > p {
            color: #f45551;
          }

          .icon-back {
            color: #f45551;
            font-size: 26px;
          }
      
          .arrow-right {
            transform: rotate(180deg);
          }
        }
      }
    }

    .list-box {
      .weex-list-inner {
        display: none;

        .bill-cell {
          flex-direction: row;
          justify-content: space-between;
          flex: 1;

          .bill {
            flex-direction: row;
            padding: 60px 40px;
            flex: 0.8;
            border-top: 1px solid #DFDFDF;
            .price {
              line-height: 100%;
              font-size: 40px;
              color: #f45551;

              &:before {
                content: "mop";
                font-size: 30px;
                padding-right: 5px;
              }
            }
          }

          .event-action {
            //padding: 40px;
            min-width: 200px;
            align-items: center;
            background-color: #f67842;
            border-top: 1px solid #f67842;

            > p {
              line-height:160px;
              color: #ffffff;
            }
          }

          .order {
           // padding: 40px;
            min-width: 200px;
            align-items: center;
            background-color: #f45551;
            border-top: 1px solid #f45551;
            flex: 0.2;
            > p {
              line-height:160px;
              color: #ffffff;
            }
          }
          .cancelorder{
            //padding:40px;
            min-width:200px;
            align-items:center;
            border:1px solid #f45551;
            flex: 0.2;
            > p {
              line-height:160px;
              color: #f45551;
            }
          }
        }
      }
    }
  }
</style>

<script>
import { i18n } from '@/renderer/modules/lang'
import { WxcTag,WxcDialog } from 'weex-ui'
export default {
  components: { WxcTag ,WxcDialog},
  props: {
    totalPrice: {
      type: String,
      default: '0.00',
    }
  },
  data: () => ({
    event: false,
    language: {
      rules: i18n.t('footer.rules'),
      Snacks: i18n.t('footer.Snacks'),
      total: i18n.t('footer.total'),
      luckydraw: i18n.t('footer.luckydraw'),
      cancelorder: i18n.t('footer.cancelorder'),
      alert:i18n.t('footer.alert'),
      title:i18n.t('footer.title'),
      call:i18n.t('footer.call'),
      affirm:i18n.t('footer.affirm')
    },
    show: false,
  }),
  methods: {
      jumpToPage (src) {
        this.$router.push(src)
      },
      openDialog () {
        this.show = true;
      },
      wxcDialogCancelBtnClicked () {
      //此处必须设置，组件为无状态组件，自己管理
        this.show = false;
      },
      wxcDialogConfirmBtnClicked () {
      //此处必须设置，组件为无状态组件，自己管理
        this.show = false;
      },
  }
}
</script>
